<!-- 
	头条组件 
	1、头条设置：头条组件背景色、头条高度设置、文章列表数组、文章显示数量、头条字体大小、头条文字颜色
	2、头条图片设置：头条图片是否显示、头条图片、头条图片大小
	3、标签设置：标签是否显示、标签内容、标签背景色、标签字体颜色、标签字体大小、标签边框是否显示、标签边框颜色
-->
<template>
	<div :class="className">
		<!-- style -->
		<div v-html="css"></div>

		<!--头条静态-->
		<div class="headline" v-if="data.list">
			<!-- 在这里写签到静态头条静态 -->
			<div class="headline_img" v-if="data.showLogo">
				<img :src="data.logoImage ? data.logoImage : emptyImage" alt="">
			</div>
			<div class="fixright">
				<div class="right" v-if="data.showNumber == 2">
					<div class="headlineTag" v-if="data.showTag">
						<span>{{data.headlineTag}}</span>
					</div>
					<div class="headline_title">
						<span
							:style="{lineHeight: data.headlineHeight/2+'px'}">{{data.list.length > 1 ? data.list[1].title:'暂无设置文章'}}</span>
					</div>
				</div>
				<div class="right">
					<div class="headlineTag" v-if="data.showTag">
						<span>{{data.headlineTag}}</span>
					</div>
					<div class="headline_title">
						<span
							:style="{lineHeight: data.headlineHeight/2+'px'}">{{data.list.length > 0 ? data.list[0].title:'暂无设置文章'}}</span>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	import emptyImage from '@/static/images/toutiao.png';

	// 自定义样式
	const css = function() {
		if (this.data.list) {
			const {
				previewColor,
				headlineHeight,
				headlineFontSize,
				headlineFontColor,
				tagColor,
				tagFontColor,
				tagFontSize,
				showTagBorder,
				tagBorderColor,
				logoImageSize
			} = this.data;

			return `
	        .component-${this.id} .headline {
	            background-color: ${previewColor};
	            height: ${headlineHeight}px;
	        }
	
	        .component-${this.id} .headline_img {
	        	width: ${logoImageSize}px;
	        }
	
	        .component-${this.id} .fixright .headline_title {
	        	color: ${headlineFontColor};
	            font-size: ${headlineFontSize}px;
	        }
	
	        .component-${this.id} .fixright .headlineTag {
	        	border-radius: 5px;
	        	background-color: ${tagColor};
	        	color: ${tagFontColor};
	            font-size: ${tagFontSize}px;
	            border: solid ${showTagBorder ? '1' : '0'}px ${tagBorderColor};
	        }
	
	    `;
		}
	};

	export default {
		name: 'u_headline',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//头条组件背景色
						"previewColor": {
							type: String,
							default: '#ffffff'
						},
						//头条高度设置
						"headlineHeight": {
							type: Number,
							default: 50
						},
						// 文章列表数组
						"list": {
							type: Array,
							default: []
						},
						//显示数量
						"showNumber": {
							type: String,
							default: '1'
						},
						//头条字体大小
						"headlineFontSize": {
							type: Number,
							default: 14
						},
						//头条文字颜色
						"headlineFontColor": {
							type: String,
							default: '#666666'
						},
						//头条图片是否显示
						"showLogo": {
							type: Boolean,
							default: true
						},
						//头条图片
						"logoImage": {
							type: String,
							default: '1'
						},
						//头条图片大小
						"logoImageSize": {
							type: Number,
							default: 36
						},
						//标签是否显示
						"showTag": {
							type: Boolean,
							default: true
						},
						//标签内容
						"headlineTag": {
							type: String,
							default: '热点'
						},
						//标签背景色
						"tagColor": {
							type: String,
							default: '#ffffff'
						},
						//标签字体颜色
						"tagFontColor": {
							type: String,
							default: '#333333'
						},
						//
						"tagFontSize": {
							type: Number,
							default: 12
						},
						//标签边框是否显示
						"showTagBorder": {
							type: Boolean,
							default: true
						},
						//标签边框颜色
						"tagBorderColor": {
							type: String,
							default: '#DD2727'
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},

		},
		data() {
			return {
				emptyImage
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	// 默认
	// .component-wrapper {
	//   width: 375px;
	// }
	.headline {
		display: flex;
		align-items: center;
		padding: 4px 0;

		.headline_img {
			margin-left: 16px;

			/*width: 36px;*/
			/*height: 36px;*/
			img {
				width: 100%;
				height: 100%;
			}
		}

		.fixright {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			justify-content: center;
		}

		.fixright .right:nth-child(2) {
			margin-top: 5px;
		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			overflow: hidden;
			height: 30px;
			.headlineTag {
				margin-left: 9px;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;

				padding: 3.5px 6.5px;
				// margin-left: 7px;
			}

			.headline_title {
				margin-left: 9px;
				flex: 0.95;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 30px;
				display: flex;
				align-items: center;
			}
		}

	}
</style>
